<template>
    <div class="madp-customer-radar">
        <mescroll-view class="scroll-view" :showMoreBtn="page.current * page.size < page.total" :total="page.total" @getMoreData="getMoreData">
            <div class="container">
                <div class="choose-date">
                    <div class="name">数据日期：</div>
                    <el-date-picker
                        :editable="false"
                        :picker-options="pickerOptions"
                        v-model="selectDate"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                        @change="changeDate"
                    >
                    </el-date-picker>
                    <i class="el-icon-arrow-down"></i>
                </div>
                <div class="show-count">
                    <div class="item">
                        <span>访问人数</span>
                        <span>{{ viewInfo.visitorNumber | formatNum }}</span>
                    </div>
                    <div class="line"></div>
                    <div class="item">
                        <span>访问次数</span>
                        <span>{{ viewInfo.browsesNumber | formatNum }}</span>
                    </div>
                </div>
                <div class="title">
                    <div class="name">客户动态</div>
                    <el-input v-model="searchValue" @blur="blurInput" suffix-icon="el-icon-search" placeholder="搜索客户"></el-input>
                    <el-select v-model="status" placeholder="请选择" @change="changeStatus">
                        <el-option label="全部" value=""> </el-option>
                        <el-option label="小店" value="00"> </el-option>
                        <el-option label="理财" value="01"> </el-option>
                        <el-option label="基金" value="02"> </el-option>
                        <el-option label="存款" value="03"> </el-option>
                        <el-option label="贷款" value="04"> </el-option>
                        <el-option label="信用卡" value="05"> </el-option>
                        <el-option label="活动" value="06"> </el-option>
                        <el-option label="早报" value="07"> </el-option>
                    </el-select>
                </div>
                <el-empty v-if="customerInfoList.length < 1" :image="require('@/assets/img/no-todo.png')" description="暂无客户动态数据"></el-empty>
                <div v-else class="info-list">
                    <div class="item" v-for="(item, idx) in customerInfoList" :key="idx">
                        <div class="header">
                            <img :src="item.headimgurl || $defaultAvatar" alt="" srcset="" />
                            <div class="info">
                                <div class="top">
                                    <div class="left">
                                        <span class="text-one-ellipsis">{{ item.nickname }}</span>
                                        <span>{{ item.type == 1 ? '行内客户' : item.type == 2 ? 'CRM客户' : '访客' }}</span>
                                    </div>
                                    <div class="time">{{ item.time }}</div>
                                </div>
                                <div class="bottom">
                                    <span>{{ item.radarTypeName }}</span>
                                    <span class="text-one-ellipsis">{{ item.radarName }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="desc">{{ item.radarDesc }}</div>
                        <div class="btns">
                            <div class="btn" v-if="item.type == 1 && item.isContact" @click="intoChat(item)">
                                <img src="@/assets/img/managerView/wechat.png" alt="" srcset="" />
                                <span>微信</span>
                            </div>
                            <div class="btn" v-else @click="copyName(item)">{{ item.mobileTel ? '复制手机号' : '复制昵称' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </mescroll-view>
        <back-btn />
    </div>
</template>
<script>
    import MescrollView from '@/components/material/mescroll-view.vue';
    import backBtn from '@/components/back-btn.vue';
    import managerViewApi from '@/api/manager-view.js';
    export default {
        components: { backBtn, MescrollView },
        data() {
            return {
                viewInfo: {},
                status: '',
                searchValue: '',
                selectDate: new Date(),
                customerInfoList: [],
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                pickerOptions: {
                    disabledDate: (time) => {
                        return time < new Date(new Date().setDate(new Date().getDate() - 7)) || time > new Date();
                    }
                }
            };
        },
        created() {},
        mounted() {},
        activated() {
            this.status = '';
            this.searchValue = '';
            let date = new Date();
            this.selectDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, 0)}-${date.getDate().toString().padStart(2, 0)}`;
            this.getContactRadarHead();
            this.getContactRadarPage();
        },
        methods: {
            changeDate() {
                this.page.current = 1;
                this.getContactRadarHead();
                this.getContactRadarPage();
            },
            blurInput() {
                this.page.current = 1;
                this.getContactRadarPage();
            },
            changeStatus() {
                this.page.current = 1;
                this.getContactRadarPage();
            },
            getMoreData() {
                this.page.current++;
                this.getContactRadarPage();
            },

            // 进入客户聊天页面
            intoChat(info) {
                if (!info.wxExternalUserid) return;
                this.$wxApi.openEnterpriseChat({
                    externalUserIds: [info.wxExternalUserid]
                });
            },
            // 进入添加客户页面
            copyName(info) {
                let copyText = info.mobileTel || info.nickname;
                this.$copyText(copyText).then(
                    (e) => {
                        console.log('复制成功:', e);
                        this.$wxApi.navigateToAddCustomer();
                    },
                    (e) => {
                        this.$toast({ text: '复制失败', type: 'error' });
                        console.log('复制失败:', e);
                    }
                );
            },
            // 访问数据
            getContactRadarHead() {
                managerViewApi
                    .getContactRadarHead({
                        wxUserId: this.$store.state.vuex_wxUserId,
                        date: this.selectDate
                    })
                    .then((res) => {
                        this.viewInfo = res.data.data;
                    });
            },
            // 雷达数据
            getContactRadarPage() {
                console.log(this.selectDate);
                managerViewApi
                    .getContactRadarPage({
                        wxUserId: this.$store.state.vuex_wxUserId,
                        date: this.selectDate,
                        name: this.searchValue,
                        radarType: this.status,
                        current: this.page.current,
                        size: this.page.size
                    })
                    .then((res) => {
                        if (this.page.current == 1) {
                            this.customerInfoList = res.data.data.records;
                        } else {
                            this.customerInfoList.push(...res.data.data.records);
                        }
                        this.page.total = res.data.data.total;
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-customer-radar {
        width: 100%;
        height: 100vh;
        background: #fafafa;
        overflow-y: scroll;
        .scroll-view {
            width: 100%;
            height: 100%;
            padding: 16px;
        }
        .container {
            .choose-date {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                .name {
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #2c2c2c;
                }
                .el-icon-arrow-down {
                    font-size: 18px;
                    color: #2c2c2c;
                }
                .el-date-editor {
                    width: 100px;
                    /deep/.el-input__inner {
                        height: 30px;
                        line-height: 30px;
                        border: none;
                        font-size: 16px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #2c2c2c;
                        background: #fafafa;
                        padding: 0;
                    }
                    /deep/.el-input__icon {
                        line-height: 1;
                    }
                    /deep/.el-input__prefix {
                        display: none;
                    }
                    /deep/.el-input__suffix {
                        display: none;
                    }
                }
            }
            .title {
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .name {
                    font-size: 18px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #2c2c2c;
                }
                .el-select {
                    width: 85px;
                    /deep/.el-input__inner {
                        height: 30px;
                        line-height: 30px;
                        border-radius: 13px;
                        border: 1px solid rgba(44, 44, 44, 0.1);
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #2c2c2c;
                    }
                    /deep/.el-input__icon {
                        line-height: 1;
                    }
                }
                .el-input {
                    width: 120px;
                    margin-left: 50px;
                    /deep/.el-input__inner {
                        height: 30px;
                        line-height: 30px;
                        border-radius: 13px;
                        border: 1px solid rgba(44, 44, 44, 0.1);
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #2c2c2c;
                    }
                    /deep/.el-input__icon {
                        line-height: 1;
                    }
                }
            }
            .show-count {
                width: 100%;
                height: 87px;
                margin-bottom: 16px;
                background-image: url('../../assets/img/managerView/kehuleida_bg.png');
                background-repeat: no-repeat;
                background-size: cover;
                box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                .line {
                    width: 1px;
                    height: 53px;
                    border: 1px solid rgba(44, 44, 44, 0.1);
                }
                .item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    :nth-child(1) {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(32, 32, 32, 0.8);
                    }
                    :nth-child(2) {
                        margin-top: 6px;
                        font-size: 24px;
                        font-family: Roboto-Medium, Roboto;
                        font-weight: 500;
                        color: #2c2c2c;
                    }
                }
            }
            .info-list {
                display: flex;
                flex-direction: column;
                .item {
                    padding: 16px;
                    width: 100%;
                    background: #ffffff;
                    box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
                    border-radius: 8px;
                    margin-bottom: 10px;
                    .header {
                        display: flex;
                        align-items: center;
                        img {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            margin-right: 8px;
                        }
                        .info {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            flex: 1;
                            width: 1px;
                            .top {
                                display: flex;
                                align-items: center;
                                .left {
                                    display: flex;
                                    align-items: center;
                                    flex: 1;
                                    :nth-child(1) {
                                        flex: 1;
                                        max-width: fit-content;
                                        font-size: 14px;
                                        font-family: PingFangSC-Medium, PingFang SC;
                                        font-weight: 500;
                                        color: #202020;
                                    }
                                    :nth-child(2) {
                                        margin-left: 5px;
                                        padding: 1px 4px;
                                        background: #d5a874;
                                        border-radius: 4px;
                                        font-size: 10px;
                                        font-family: PingFangSC-Medium, PingFang SC;
                                        font-weight: 500;
                                        color: #ffffff;
                                    }
                                }
                                .time {
                                    margin-left: 5px;
                                    float: right;
                                    font-size: 10px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: rgba(32, 32, 32, 0.4);
                                    text-align: right;
                                }
                            }
                            .bottom {
                                display: flex;
                                align-items: center;
                                margin: 0;
                                margin-top: 5px;
                                :nth-child(1) {
                                    font-family: PingFangSC-Medium, PingFang SC;
                                    font-weight: 500;
                                    font-size: 10px;
                                    font-family: PingFangSC-Medium, PingFang SC;
                                    background: #ed5555;
                                    color: #ffffff;
                                    padding: 1px 4px;
                                    border-radius: 4px;
                                }
                                :nth-child(2) {
                                    flex: 1;
                                    margin-left: 5px;
                                    font-size: 13px;
                                    font-family: PingFangSC-Medium, PingFang SC;
                                    font-weight: 500;
                                    color: #202020;
                                    text-align: left;
                                }
                            }
                        }
                    }
                    .desc {
                        margin-top: 8px;
                        font-size: 12px;
                        line-height: 17px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(44, 44, 44, 0.8);
                    }
                    .btns {
                        margin-top: 10px;
                        display: flex;
                        justify-content: flex-end;
                        .btn {
                            margin-left: 10px;
                            display: flex;
                            align-items: center;
                            border-radius: 13px;
                            border: 1px solid #ed5550;
                            padding: 5px 16px;
                            img {
                                width: 16px;
                                height: 16px;
                                margin-right: 8px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
